<template>
  <view class="bg-white">
    <cu-custom bgColor="bg-white" :isBack="true">
      <block slot="content">合同详情</block>
      <!-- <block slot="right">
				<button class="cu-btn bg-red shadow" @click="urging">催办</button>
			</block> -->
    </cu-custom>
    <view style="padding: 15px">
      <view
        style="
          background-color: #f3f5fc;
          border-radius: 10px;
          padding: 15px 10px;
          position: relative;
        "
      >
        <text style="color: #4591fe; font-weight: 400; font-size: 12px">
          创建日期：{{ dataObj.createTime }}
        </text>
        <view style="position: absolute; right: 0; top: 0">
          <statusText :status="dataObj.approvalStatus"></statusText>
        </view>
      </view>
      <!-- <view
				style="text-align: center;background-color: #fae1e1;border-radius: 10px;padding: 10px;margin-top: 10px;">
				<text style="color: #101317;font-weight: 400;font-size: 12px;">
					劳务合同转劳务合同
				</text>
			</view>
			<view style="background-color: #e1ebfa;border-radius: 10px;padding: 10px;margin-top: 10px;">
				<view>
					<text style="color: #101317;font-weight: 400;font-size: 12px;">
						劳务合同续签：{{renewalTime}}
					</text>
				</view>
				<view style="margin-top: 10px;">
					<text style="color: #101317;font-weight: 400;font-size: 12px;">
						距离退休还有：{{retireTime}}
					</text>
				</view>
			</view> -->
      <view style="margin-top: 20px">
        <view class="action" style="margin-bottom: 10px">
          <text class="cuIcon-titles" style="color: #1e5eff"></text>
          <text style="color: #000000; font-weight: bold; font-size: 30rpx">
            基础信息
          </text>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            公司
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            <view
              style="
                background-color: #e1ebfa;
                padding: 5px 10px;
                margin-top: -5px;
                width: 120px;
                border-radius: 2px;
              "
            >
              <!-- <image src="@/static/images/gongsi.png" style="width: 12px;height: 12px;margin-right: 5px;">
							</image> -->
              <text style="color: #101317; font-size: 13px; font-weight: 500">
                {{ dataObj.company_dictText }}
              </text>
            </view>
          </view>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            姓名
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            {{ dataObj.userId_dictText }}
          </view>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            性别
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            {{ dataObj.sex_dictText }}
          </view>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            身份证号
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            {{ dataObj.idCard }}
          </view>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            进厂时间
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            {{
              dataObj.enterFactoryTime != null ? dataObj.enterFactoryTime.replace(/-/g, "/") : null
            }}
          </view>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            工号
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            {{ dataObj.workNo }}
          </view>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            联系电话
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            {{ dataObj.phone }}
          </view>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            年龄
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            {{ dataObj.age }}
          </view>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            出生年月
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            {{
              dataObj.birthday != null
                ? dataObj.birthday.replace(/-/g, "/")
                : null
            }}
          </view>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            合同类型
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            {{ dataObj.signType_dictText }}
          </view>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            合同类型
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            {{ dataObj.contractType_dictText }}
          </view>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            工龄
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            {{ dataObj.seniority }}
          </view>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            分类
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            {{ dataObj.classification }}
          </view>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            岗位
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            {{ dataObj.post }}
          </view>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            班次
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            {{ dataObj.classes }}
          </view>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            计费标准
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            {{ dataObj.freightBasis_dictText }}
          </view>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            合同间隔时间
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            {{ dataObj.daysFromSigning }}
          </view>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            合同起始时间
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            <!-- {{dataObj.contractStartTime}} -->
            {{
              dataObj.contractStartTime != null
                ? dataObj.contractStartTime.replace(/-/g, "/")
                : null
            }}
          </view>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            合同到期时间
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            <!-- {{dataObj.contractEndTime}} -->
            {{
              dataObj.contractEndTime != null
                ? dataObj.contractEndTime.replace(/-/g, "/")
                : null
            }}
          </view>
        </view>
        <view class="flex" style="width: 300px">
          <view class="flex-sub padding-sm margin-xs radius textStyle">
            合同签订时间
          </view>
          <view class="flex-sub padding-sm margin-xs radius">
            <!-- {{dataObj.contractSigningTime}} -->
            {{
              dataObj.contractSigningTime != null
                ? dataObj.contractSigningTime.replace(/-/g, "/")
                : null
            }}
          </view>
        </view>
        <!-- <view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						合同次数
					</view>
					<view class="flex-sub padding-sm margin-xs radius" style="color: #4591FE;">
						{{dataObj.contractNum}}
					</view>
				</view>
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						经办人
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.operator}}
					</view>
				</view> -->
      </view>
      <view class="action" style="margin-top: 10px">
        <text class="cuIcon-titles" style="color: #1e5eff"></text>
        <text style="color: #000000; font-weight: bold; font-size: 30rpx">
          合同附件
        </text>
      </view>
      <view
        style="
          margin-top: 10px;
          background-color: #f9f9f9;
          border-radius: 10px;
          padding: 15px 25px;
        "
      >
        <view style="display: flex">
          <view
            style="
              width: 20px;
              height: 20px;
              background-color: #34b483;
              border-radius: 50%;
            "
          ></view>
          <span style="margin-left: 15px; color: #101317; font-weight: 500"
            >合同附件</span
          >
          <!-- <image class="nav-right-image" src="@/static/images/xiazai.png"></image> -->
          <!-- <a style="margin-left: 15px;color: #4591FE;" @click="reUpload">重新上传</a> -->
        </view>
        <view v-for="(item, index) in dataObj.contractFiles" :key="index">
          {{ item.contractFile }}
        </view>
        <view style="display: flex; margin-top: 15px">
          <view
            style="
              width: 20px;
              height: 20px;
              background-color: #34b483;
              border-radius: 50%;
            "
          ></view>
          <span style="margin-left: 15px; color: #101317; font-weight: 500"
            >合同补充条款</span
          >
          <!-- <image class="nav-right-image" src="@/static/images/xiazai.png"></image> -->
        </view>
        <view v-for="(item, index) in dataObj.contractSupplements" :key="index">
          {{ item.contractSupplementFile }}
        </view>
      </view>
      <view class="action" style="margin-top: 20px">
        <text class="cuIcon-titles" style="color: #1e5eff"></text>
        <text style="color: #000000; font-weight: bold; font-size: 30rpx">
          合同续签记录
        </text>
      </view>
      <view
        v-for="(item, index) in dataObj.contractRenewals"
        :key="index"
        style="
          margin-top: 10px;
          background-color: #f9f9f9;
          border-radius: 10px;
          padding: 30rpx 15rpx;
        "
      >
        <view style="display: flex">
          <span style="margin-left: 15px; color: #101317; font-weight: 500"
            >续签开始时间:{{ item.contractStartTime }}</span
          >
        </view>
        <view style="display: flex; margin-top: 20rpx">
          <span style="margin-left: 15px; color: #101317; font-weight: 500"
            >续签结束时间:{{ item.contractEndTime }}</span
          >
        </view>
        <view style="display: flex; margin-top: 20rpx">
          <span style="margin-left: 15px; color: #101317; font-weight: 500"
            >详情:{{ item.details }}</span
          >
        </view>
      </view>
      <view style="margin-top: 15px">
        <view class="action" style="margin-bottom: 10px">
          <text class="cuIcon-titles" style="color: #1e5eff"></text>
          <text style="color: #000000; font-weight: bold; font-size: 30rpx">
            审批记录
          </text>
        </view>
        <view
          style="
            background-color: #f4f4f4;
            border-radius: 10px;
            margin-top: 10px;
          "
        >
          <view class="cu-timeline" v-for="(item, index) in approvalRecords">
            <view class="cu-item text-green cuIcon-roundcheckfill">
              <view style="display: flex; color: #000000">
                <view style="width: 25px">
                  <text
                    style="
                      margin-left: -18px;
                      margin-top: 5px;
                      display: block;
                      font-weight: bold;
                    "
                    >{{ item.currentNodeDictText }}</text
                  >
                </view>
                <view style="margin-left: 20px">
                  <view>
                    <text style="font-size: 28rpx">{{
                      item.approverDictText
                    }}</text>
                    <text
                      style="
                        display: inline-block;
                        padding: 2px;
                        background-color: #d9d9d9;
                        border-radius: 5px;
                        font-size: 16rpx;
                        margin-left: 10px;
                        color: #a1a1a1;
                      "
                      >{{ item.remark }}</text
                    >
                    <text
                      v-if="item.approvalStatusDictText == '同意'"
                      style="
                        display: inline-block;
                        padding: 4rpx 10rpx;
                        background-color: #34b483;
                        border-radius: 5px;
                        font-size: 16rpx;
                        margin-left: 15px;
                        color: #ffffff;
                      "
                      >{{ item.approvalStatusDictText }}</text
                    >
                    <text
                      v-if="item.approvalStatusDictText == '待审'"
                      style="
                        display: inline-block;
                        padding: 4rpx 10rpx;
                        background-color: #c6ffbe;
                        border-radius: 5px;
                        font-size: 16rpx;
                        margin-left: 15px;
                        color: #48b237;
                      "
                      >{{ item.approvalStatusDictText }}</text
                    >
                    <text
                      v-if="item.approvalStatusDictText == '驳回'"
                      style="
                        display: inline-block;
                        padding: 4rpx 10rpx;
                        background-color: #f5222d;
                        border-radius: 5px;
                        font-size: 16rpx;
                        margin-left: 15px;
                        color: #ffffff;
                      "
                      >{{ item.approvalStatusDictText }}</text
                    >
                    <text
                      v-if="item.approvalStatusDictText == '结束'"
                      style="
                        display: inline-block;
                        padding: 4rpx 10rpx;
                        background-color: #d9d9d9;
                        border-radius: 5px;
                        font-size: 16rpx;
                        margin-left: 15px;
                        color: #a0a0a0;
                      "
                      >{{ item.approvalStatusDictText }}</text
                    >
                  </view>
                  <view>
                    <text style="font-size: 24rpx">{{
                      item.approvalTypeDictText
                    }}</text>
                    <text
                      style="
                        font-size: 20rpx;
                        color: #c7c7c7;
                        margin-left: 15px;
                      "
                      >{{ item.createTime }}</text
                    >
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      createTime: "2023/10/10 12:00",
      renewalTime: "10天",
      retireTime: "235天",
      dataObj: {
        id: "",
        company: "",
        name: "杨慧",
        sex: "男",
        idCard: "293993002010010111",
        inTime: "2023/10/05",
        workNumber: "218395",
        phone: "13634645415",
        age: "23",
        birthday: "1997/10/10",
        contractType: "劳务合同",
        workAge: "13",
        post: "工人",
        startTime: "2023/10/05",
        endTime: "2025/10/05",
        intervalTime: "三个月",
        signTime: "2023/10/05",
        contractNum: 1,
        handledBy: "小雪",
      },
      dataObj2: {
        id: "",
        company: "福建华源纺织",
        userId_dictText: "杨慧",
        sex: "男",
        idCard: "293993002010010111",
        inTime: "2023/10/05",
        workNo: "218395",
        phone: "13634645415",
        age: "23",
        birthday: "1997/10/10",
        contractType: "劳务合同",
        seniority: "13",
        post: "工人",
        startTime: "2023/10/05",
        endTime: "2025/10/05",
        intervalTime: "三个月",
        signTime: "2023/10/05",
        contractNum: 1,
        handledBy: "小雪",
      },
      approvalRecords: [
        {
          title: "总经理",
          name: "陈婷婷",
          area: "手写区域",
          state: "同意",
          manager: "企管",
          dateTime: "2023/10/10 12:00",
        },
      ],
    };
  },
  onLoad: function (options) {
    this.dataObj.id = options.id;
    // 在这里可以使用获取到的 id 参数进行后续操作
  },
  mounted() {
    this.getDetail();
  },
  computed: {},
  methods: {
    getDetail() {
      this.$http
        .get("/crm_contract/crmContract/queryDetail/" + this.dataObj.id)
        .then((res) => {
          if (res.data.success) {
			  console.log('合同详情',res.data)
            this.dataObj = res.data.result;
            // this.dataObj['avatar'] = this.getFileAccessHttpUrl(this.dataObj['avatar'])
            // console.log(this.dataObj['avatar'])
            this.approvalRecords = this.dataObj.approvalRecords;
          }
        });
    },
    urging(id) {
      const params = {
        applicationId: id,
        approvalType: 1,
      };
      this.$http
        .get("/crm_on_hand/crmOnHand/urge", {
          params: params,
        })
        .then((res) => {
          if (res.data.success) {
            this.$refs.urgingPopup.open("center");
          }
        });
    },
    reUpload() {
      console.log("重新上传");
    },
  },
};
</script>

<style>
.cu-form-group {
  background-color: #ffffff;
  line-height: 15px;
  padding: 0.5px 15px;
  display: flex;
  align-items: center;
  min-height: 42px;
  justify-content: space-between;
}

.cu-form-group uni-picker .picker {
  line-height: 15px;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  text-align: right;
}

.cu-form-group uni-picker::after {
  font-family: cuIcon;
  line-height: 15px;
  display: block;
  content: "\e6a3";
  position: absolute;
  font-size: 17px;
  color: #8799a3;
  width: 31px;
  text-align: center;
  top: 0;
  bottom: 0;
  right: -10px;
  margin: auto;
}

/deep/ .uni-radio-input {
  width: 15px;
  height: 15px;
}

.nav-right-image {
  width: 40rpx;
  height: 40rpx;
  margin-left: 15px;
}

.padding-sm {
  padding: 5px;
}

.textStyle {
  font-size: 13px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #101317;
  line-height: 22px;
}
</style>
